<template>
  <div class="book-list">
    <!-- 类型标签栏 -->
    <div class="category-header">
      <div class="category-tags">
        <van-tag 
          v-for="tag in tags" 
          :key="tag.type"
          :type="activeTag === tag.type ? 'primary' : 'default'"
          @click="switchCategory(tag.type)"
        >
          {{ tag.name }}
        </van-tag>
      </div>
    </div>

    <!-- 书籍列表 -->
    <van-list>
      <van-cell v-for="(book, index) in currentBookList" :key="index">
        <div class="book-item">
          <img :src="book.cover" class="book-cover" />
          <div class="book-info">
            <h3>{{ book.title }}</h3>
            <p>{{ book.author }}</p>
            <p>{{ book.keywords }}</p>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 定义所有分类的数据
const allBooks = {
  scifi: [ // 科幻末世
  {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2o7cb12a6921759da2ea8ecba0d52d17ad~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751804638&x-signature=GuFbb0qcsAw2OUKqBz4KkxMmidY%3D',
    title: '倒计时90天：华夏进入一级战备',
    author: '风中摇摆的咸鱼',
    keywords: "关键词:'末日重生','举国流','硬核军工'"
  },
  {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2odb1d8d52526f87ca2da80619b8738509~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751804638&x-signature=5P%2BMoIdFcUi8%2FWgy6VsSBM6NeXM%3D',
    title: '冰河末世，我囤积了百亿物资',
    author: '记忆的海',
    keywords:"关键词:'末世','重生','爆囤物资'"
  },
  {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2ob38486cc9d423b3710c9b2d5254e162a~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751804638&x-signature=QDtLAkqeDLhGEJIc9voJrbuwZtY%3D',
    title: '末日,我真不是土匪',
    author: '星梦辰缘',
    keywords: "关键词:'末日丧尸','不重生','无系统'" 
  },
  {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2ofc8c8e275cbf41e4a9832f755851a6df~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751804638&x-signature=hvA8OaFevwXAJXILzf3WxGO5zVU%3D',
    title: '庇护所进化论',
    author: '半顷阳光',
    keywords: "关键词:'血肉','末日','单男主+无女主'" 
  },
  {
    cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2o693111d5086cfec4c852360297f53028~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751804638&x-signature=Rr6fqHUgp9pmFds3Im%2B44658tQ0%3D',
    title: '开局丧失末日?我直接打爆星球',
    author: '今天早上吃饺子',
    keywords: "关键词:'升级','爽到爆炸','战力指数级飙升'" 
  }
  ],
  cityday: [ // 都市日常
    {
      cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2o18e5ab65321f5cbe6fe7431fb50780f0~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751804640&x-signature=SOhxwUYq5j4vvSVfNKVV89P098s%3D',
      title: '从烂仔到黑道枭雄',
      author: '祝融必火',
      keywords: "关键词:'都市','黑道','多女主+大佬'"
    },
    {
      cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/37a5df2d49a9cd490a7e9788fc738166~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751804640&x-signature=E01RhC9XeFasZEqey5t39EFtvEM%3D',
      title: '学姐别怕,我来保护你',
      author: '隔胳呜呜',
      keywords: "关键词:'日常轻松','单女主','无系统'"
    },
    {
      cover: 'https://p9-reading-sign.fqnovelpic.com/novel-pic/p2o0fd7f5a4675599e57affff0cc5a9b4a9~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751804640&x-signature=E0nH8vDbVeXoqLj8ED%2FF4VegT8Y%3D',
      title: '领证爽约?我闪婚女总裁你哭啥',
      author: '喜多多',
      keywords: "关键词:'闪婚女总裁','追夫火葬场不原谅','甜文'"
    },
  ],
  history: [ // 历史古代
    {
      cover: 'https://p3-reading-sign.fqnovelpic.com/novel-pic/p2o154f9b84fc872026c8ec13ff8a9f0db6~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751812523&x-signature=WJ0VEngvP52Zm96Hh7CI%2F0mfkh0%3D',
      title: '当兵就发媳妇?我怒取十八房老婆',
      author: '糖糖六公子',
      keywords: '"什么?当兵就能免费娶老婆?那我要当......"'
    },
    {
      cover: 'https://p9-reading-sign.fqnovelpic.com/novel-pic/p2ofdd22b6c846d20c39895c89cfb5ac175~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751812523&x-signature=8FwO8luDqRsJrIS%2FaZuDNOygmfA%3D',
      title: '全族!供我科举',
      author: '爱吃焖黄羊肉的杨婵',
      keywords: '关键词:"科举","穿越","无金手指"'
    },
    {
      cover: 'https://p9-reading-sign.fqnovelpic.com/novel-pic/p2off95b13ed1d339efe994ca9034c2646a~tplv-resize:225:0.image?lk3s=5b7047ff&x-expires=1751812523&x-signature=q7QegD1zjae4%2FEBH3Alrd%2FmoQtM%3D',
      title: '我,最强毒士,女帝直呼活阎王',
      author: '星星子',
      keywords: '"高阳穿越大乾,恰逢女帝登基,广聚天下人才......"'
    }
  ]
};

// 类型标签配置
const tags = [
  { type: 'scifi', name: '科幻末世' },
  { type: 'cityday', name: '都市日常' },
  { type: 'history', name: '历史古代' }
];

const activeTag = ref('scifi'); // 当前选中的类型

// 计算当前显示的书籍列表
const currentBookList = computed(() => {
  return allBooks[activeTag.value] || [];
});

// 切换分类
const switchCategory = (type) => {
  activeTag.value = type;
};
</script>

<style scoped>
.book-list {
  padding: 15px;
}

.category-header {
  display: flex;
  justify-content: center; /* 保持标签居中 */
  margin-bottom: 15px;
}

.category-tags {
  display: flex;
  gap: 10px;
}

.van-tag {
  font-size: 25px;
  padding: 10px 15px;
  height: auto;
  line-height: 1.5;
  border-radius: 13px;
}

/* 修改书籍项布局 */
.book-item {
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  gap: 10px; /* 图片和文字间距 */
}

.book-cover {
  width: 60px;
  height: 80px;
  flex-shrink: 0; /* 防止图片被压缩 */
}

.book-info {
  flex: 1;
  text-align: left; /* 确保文字左对齐 */
  margin-left: 0; /* 移除默认左边距 */
}

/* 调整标题和作者信息的间距 */
.book-info h3 {
  margin: 0 0 5px 0; /* 只保留下方间距 */
}

.book-info p {
  margin: 0 0 3px 0; /* 减少段落间距 */
}
</style>